import { NavBar, DatePicker } from 'antd-mobile'
import './index.scss'
import {useEffect, useMemo, useState} from "react";
import classNames from "classnames";
import dayjs from "dayjs";
import {useSelector} from "react-redux";
import DayBill from "@/page/Month/components/DayBill/index.jsx";

const Month = () => {
    //获取账单数据
    const billList = useSelector(state => state.bill.billList)
    //使用一个列表存储账单数据
    //按照日期分组，key为日期，value为账单列表，利用reduce函数
    const billMap =  useMemo(() => billList.reduce((preMap, item) => {
        const key = dayjs(item.date).format('YYYY | MM')
        if(preMap[key]){
            preMap[key].push(item)
        }else{
            preMap[key] = [item]
        }
        return preMap
    },{}),[billList])

    //日期
    const [date, setDate] = useState(() => dayjs(new Date()).format('YYYY | MM'))
    // 日期选择器是否可见
    const [dateVisible, setDateVisible] = useState(false)
    //初始化当前月份的账单数据
    useEffect(() => {
        setCurrentBillList(billMap[dayjs(new Date()).format('YYYY | MM')] || [])
    }, [billMap])
    //获取当前月份的账单数据
    const [currentBillList, setCurrentBillList] = useState(() => billMap[dayjs(new Date()).format('YYYY-MM')] || [])
    const monthResult = useMemo(() => {
        const pay = currentBillList.reduce((pre, item) => {
            return item.type === 'pay' ? pre + item.money : pre
        },0)
        const income = currentBillList.reduce((pre, item) => {
            return item.type === 'income' ? pre + item.money : pre
        }, 0)
        return {
            pay,
            income,
            total:pay + income
        }
    }, [currentBillList])
    //当前月按日期分组的账单数据
    const dayGroup = useMemo(() => currentBillList.reduce((preMap, item) => {
        const key = dayjs(item.date).format('YYYY-MM-DD')
        if(preMap[key]){
            preMap[key].push(item)
        }else{
            preMap[key] = [item]
        }
        return preMap
    }, {}), [currentBillList])
    // 当月日期列表
    const dayList = useMemo(() => {
        return Object.keys(dayGroup)
    }, [dayGroup])
    // 确认
    const onConfirm = (date) => {
        setDateVisible(false)
        const formatDate = dayjs(date).format('YYYY | MM')
        setCurrentBillList(billMap[formatDate] || [])
        setDate(formatDate)
    }
    //取消
    const onCancel = () => {
        setDateVisible(false)
    }
    return (
        <div className="monthlyBill">
            <NavBar className="nav" backArrow={false}>
                月度收支
            </NavBar>
            <div className="content">
                <div className="header">
                    {/* 时间切换区域 */}
                    <div className="date" onClick={() => setDateVisible(true)}>
                        <span className="text text-align-center">
                          {date}月账单
                        </span>
                        <span className={classNames('arrow',{expand:dateVisible})}></span>
                    </div>
                    {/* 统计区域 */}
                    <div className='twoLineOverview'>
                        <div className="item">
                            <span className="money">{-monthResult.pay}</span>
                            <span className="type">支出</span>
                        </div>
                        <div className="item">
                            <span className="money">{monthResult.income}</span>
                            <span className="type">收入</span>
                        </div>
                        <div className="item">
                            <span className="money">{monthResult.total}</span>
                            <span className="type">结余</span>
                        </div>
                    </div>
                    {/* 时间选择器 */}
                    <DatePicker
                        className="kaDate"
                        title="记账日期"
                        precision="month"
                        visible={dateVisible}
                        max={new Date()}
                        onConfirm={onConfirm}
                        onCancel={onCancel}
                    />

                </div>
                {/* 账单列表 */}
                {dayList.map((item) => {
                    return <DayBill day={item} billList={dayGroup[item]} key={item}></DayBill>
                })}
            </div>
        </div >
    )
}

export default Month